<template>
  <div class="address-list">
    <van-nav-bar title="我的收获地址" left-text="" right-text="" left-arrow @click-left="onClickLeft"
      style="background-color: #F5F5F5;">
      <template #left>
        <van-icon name="arrow-left" size="19" color="#000" />
      </template>
      <!-- <template #right>
        <van-icon name="ellipsis" size="22" color="#000" />
      </template> -->
    </van-nav-bar>
    <div v-if="list.length > 0">
      <div v-for="(item, index) in list" :key="index">


        <div class="user-order" @click="selAddress(item)">
          <div style="display: flex;padding-top: 14px;">
            <div
              style="padding-left: 13px;font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 16px;color: #272727">
              {{ item.name }}</div>
            <div
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 16px;color: #0A0A0A;padding-left: 11px;width: 270px;">
              {{ item.mobile }}</div>
            <div
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #999999;right: 27px;float:right;position: absolute"
              @click.stop="editAddress(item)">
              编辑</div>
          </div>
          <div style="height: 45px;">
            <div style="display: flex;margin-top: 8px;">
              <div v-if="item.is_default == 1"
                style="width: 32px;height: 18px;background: #389138;border-radius: 3px;margin-left: 19px;font-size: 11px;text-align: center;color: #fff;line-height: 18px;">
                默认</div>
              <div
                style="margin-left: 10px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #4F4F4F;">
                {{ item.address.substring(0, 24) }}</div>
            </div>

            <div v-if="item.is_default == 1"
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #4F4F4F;margin-left: 19px;margin-top: 4px;">
              {{ item.address.substring(20, item.address.length) }}</div>
            <div v-else
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #4F4F4F;margin-left: 10px;margin-top: 4px;">
              {{ item.address.substring(24, item.address.length) }}</div>
          </div>
          <div style="margin-top: 22px;display: flex;">
            <img v-if="item.is_default == 1" src="../../assets/my/defaultimg.png" alt="" srcset=""
              style="width: 19px;height: 19px;margin-left: 19px;" @click.stop="setDefaultAddress(item.id)">

            <img v-else src="../../assets/my/dbaj.png" alt="" srcset=""
              style="width: 19px;height: 19px;margin-left: 19px;" @click.stop="setDefaultAddress(item.id)">
            <div
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 13px;color: #999999;margin-left: 10px;padding-top: 3px;">
              默认地址</div>

            <img src="../../assets/my/dellete.png" alt="" srcset=""
              style="width: 14px;height: 15px;right: 60px;float:right;position: absolute">
            <div
              style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #999999;right: 27px;float:right;position: absolute"
              @click.stop="deleteAddress(item.id)">
              删除</div>
          </div>

        </div>

      </div>
    </div>

    <div v-else style="text-align: center;">
      <img src="../../assets/my/Group.png" alt="" srcset="" style="width: 180px;height: 128px;margin-top: 109px;">
      <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;">暂无收货地址</div>
    </div>

    <div style="margin-top: 112px;">
      <van-button type="primary"
        style="width: 320px;height: 44px;border-radius: 50px;margin-left: 42px;background-color: #389138;font-size: 16px;"
        @click="adddizhi">添加新地址</van-button>
    </div>


  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { getAddress, deleteAddress, setDefaultAddress } from '@/api/user.js'
import { Dialog } from 'vant';

export default {
  name: 'Address',
  components: {
    NavBar
  },
  data() {
    return {
      defaultId: '',
      list: [],
      exhibitionSettlementItemDTOs: [],
      addressInfo: ""
    }
  },
  async mounted() {
    this.$toast.loading('加载中...')
    this.addressInfo = this.$route.query.addressInfo
    // this.list = await this.$store.dispatch('address/getList')
    // this.list.forEach(item => {
    //   item.address = item.province + item.city + item.county + ' ' + item.addressDetail
    // })
    // this.$toast.clear()
    this.getAddress()
  },
  methods: {
    selAddress(obj) {
      this.$route.params.addressInfo = obj
      this.$router.back();
    },
    setDefaultAddress(id) {
      let obj = {
        ids: id,

      }
      setDefaultAddress(obj).then(res => {
        this.getAddress()

      }).catch(e => { })
    },
    getAddress() {
      let obj = {
        page: 1,
        pageSize: 100
      }
      getAddress(obj).then(res => {
        this.list = res.data.list
        this.list.forEach(item => {
          item.address = item.province + item.city + item.country + item.detail
        })

      }).catch(e => { })
    },
    deleteAddress(id) {
      let obj = {
        ids: id,

      }
      Dialog.confirm({
        title: '',
        message: '确认是否要删除？',
      })
        .then(() => {
          // on confirm
          deleteAddress(obj).then(res => {

            this.getAddress()
          }).catch(e => { })
        })
        .catch(() => {
          // on cancel
        });

    },
    onClickLeft() {
      this.$route.params.addressInfo = this.addressInfo
      this.$router.back()
    },
    onSelect(item, index) {
      this.$store.dispatch('address/setList', index)
      this.$router.go(-1)
    },
    adddizhi() {
      this.$router.push({
        path: '/address/edit'
      })
    },
    editAddress(val) {


      this.$router.push({
        path: '/address/edit',
        query: {
          val
        }
      })
    },
    onEdit(item, index) {
      this.$toast('编辑地址:' + index)
      this.$router.push({
        path: '/address/edit',
        query: {
          index
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.address-list {
  background: #f5f5f5;
  min-height: 100vh;
}


.user-order {
  width: 702px;
  height: 260px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px !important;
  margin-top: 42px;
  background-color: #fff;
}
</style>
